<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>v-for循环对象</p>
        <!-- :key="index" key的值应该是数字或者字母，不能用数组或者对象作为key的值，这是编号 -->
        <p v-for="(val, key, index) in obj1" :key="index">{{index + 1}}. {{key}}-{{val}}</p>
        <hr>
        <p>v-for循环整数---正整数</p>
        <button v-for="num in 5" :key="'a'+num">{{num}}</button>
        <hr>
        <p>v-for循环字符串</p>
        <button v-for="(l,index) in obj1.title" :key="l">{{index}}.{{l}}</button>
        <hr>
        <!-- 有括号就显式传参，将$event对象传递 -->
        <button v-on:click="fn1('2022', $event)">click</button>
        <!-- v-on 的缩写 是@，语法糖 -->
        <!-- $event对象可以隐式传参，针对不写括号的情况 -->
        <input type="text" @input="fn2">
        <p>{{msg}}</p>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 接受输入框的值，并展示在p标签中
                msg: '',
                obj1: {
                    name: '马保国',
                    age: 70,
                    sex: '男',
                    title: '混元形意太极-掌门人',
                    R: '闪电五连鞭',
                    hasWude: true,
                    isLogin: true
                }
            },
            methods: {
                fn1(year, e) {
                    // this指向当前vue实例
                    console.log(this);
                    console.log(year);
                    console.log(e);
                },
                fn2(e) {
                    this.msg = e.target.value;
                }
            }
        })
    </script>
</body>
</html>